﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>这是一个p标签</p>
    <div>
        这是一个div标签
        <a href="#" class="box">这是一个a标签</a>
    </div>
    <script>
        var p = document.getElementsByTagName('p')[0];
        var div = document.getElementsByTagName('div')[0];
        /*************************方法1************************/
        //DOM元素的类
        
        HTMLElement.prototype.getEleByClassName = getElementsByClassName;

        function getElementsByClassName(str){
            //如果有自己的方法 ， 就使用自己的方法
            // if(this.getElementsByClassName){
            //     return this.getElementsByClassName(str);
            // }
            //如果每没有，就先找到所有的标签
            var arr = this.getElementsByTagName('*');
            var classArr = [];
            //class名要单独进行  防止连接在一起
            var reg = eval('/ ' +str+ ' /');
            //对每一个标签的className进行匹配
            for(var i = 0; i<arr.length; i++){
                //如果包含对应的类名  就放在要返回的数组中
                if(reg.test(' ' + arr[i].className + ' ')){
                    classArr.push(arr[i]);
                }
            }
            return classArr;
        }

        //测试    360安全  360急速  chrome  FF
        p.appendChild(div.getEleByClassName('box')[0]);
        /************************方法2***************************/
        //建立一个方法进行匹配
        function get(obj, str) {
            //判断  如果传进来的 是一个DOM元素 或者 字符串 才进行下一步
            if (!( obj.nodeType === 1 || obj.nodeType === 9  || typeof obj === 'string')) return;
            //能力检测
            if(document.getElementsByClassName){
                if(str){
                    return obj.getElementsbyClassName(str);
                }
                return document.getElementsByClassName(obj);
            }
            //如果传入了第二个参数
            if (str) {
                //得到所有的标签
                var arr = obj.getElementsByTagName('*'),
                    classArr = [],
                    reg = eval('/ ' + str + ' /');
                //找到每一个标签
                for (var i = 0; i < arr.length; i++) {
                    //如果标签的className符合要求就放入返回数组当中
                    if (reg.test(' ' + arr[i].className + ' ')) {
                        classArr.push(arr[i]);
                    }
                }
                return classArr;
            } else {
                //如果没有第二个参数，用document调用
                return arguments.callee(document, obj);
            }
        }
        //测试
        console.log(get('box'));

    </script>
</body>
</html>